<template>
    <div>
        门店选择
        <select v-model="finds.MLX">
            <option value="0">请选择</option>
            <option v-for="m in Men" :value="m.MID">{{ m.MName }}</option>
        </select>
        卡券名称
        <input type="text" v-model="finds.SName">
        卡券类型
        <select v-model="finds.KLX">
            <option value="0">请选择</option>
            <option v-for="K in Ka" :value="K.KID">{{ K.KName }}</option>
        </select>
        状态
        <select v-model="finds.SZT">
            <option value=null>请选择</option>
            <option value="True">上架</option>
            <option value="False">下架</option>
        </select>
        <input type="button" value="查询" @click="Show()">
        <input type="button" value="重置" @click="CZ()">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="quan" @change="qx">
                    </th>
                    <th>编号</th>
                    <th>卡券名称</th>
                    <th>图片</th>
                    <th>卡券类型</th> 
                    <th>通用范围</th>
                    <th>适用日期</th>
                    <th>有效期</th>
                    <th>价格</th>
                    <th>排序</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody v-for="a in data">
                    <tr>
                    <th>
                        <input type="checkbox" v-model="redids" :value="a.SID">
                    </th>
                    <th>{{a.SID}}</th>
                    <th>{{a.SName}}</th>
                    <th>
                        <img :src="'https://localhost:7158'+a.STP" style="width: 100px;height: 100px;">
                    </th>
                    <th>{{a.KName}}</th>
                    <th>{{a.MName}}</th>
                    <th>{{a.SRQ}}</th>
                    <th>{{a.SYX}}</th>
                    <th>{{a.SJG}}</th>
                    <th>{{a.PX}}</th>
                    <th>{{a.SZT?"启用":"禁用"}}</th>
                    <th>
                        <input type="button" value="编辑" @click="Fan(a.SID)">
                        <input type="button" value="逻辑删除" @click="DelUpd(a.SID)">
                        <input type="button" value="批量状态修改" @click="DelZT()">
                    </th>
                </tr>
            </tbody>
        </table>
        <span>
            一共{{fysy.totalnum}}条,一共{{fysy.totalpage}}页
            每页{{finds.pagelaze}}条,当前{{finds.pageindex}}页
        </span>
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(finds.pageindex-1)">
        <input type="button" v-for="d in fysy.totalpage" :value="d" @click="FY(d)">
        <input type="button" value="下一页" @click="FY(finds.pageindex+1)">
        <input type="button" value="尾页" @click="FY(fysy.totalpage)">
        页容量
        <select v-model="finds.pagelaze" @change="Rshow">
             <option value="2">2</option>
            <option value="5">5</option>
            <option value="7">7</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <input type="text" v-model="finds.pageindex"> <input type="button" value="跳转" @click="tz">
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const quan=ref(false);
const redids=ref([])
const tz=()=>{
    Show()
}
onMounted(()=>{
    Show();
    MShow();
    KShow();
    ZShow();
})

const data =ref([{
      "SID": 0,
      "SName": "",
      "STP": "",
      "KLX": 0,
      "KName": "",
      "MLX": 0,
      "MName": "",
      "SRQ": "",
      "SYX": "",
      "SJG": "",
      "PX": "0",
      "ZLX": 0,
      "ZName": "",
      "SZT": null,
      "Isdel": null
}])

const Men=ref([{
    "MID": 1,
    "MName": "门店1"
}])

const Ka=ref([{
    "KID": 1,
    "KName": "小时卡"
}])
const ZT=ref([{
    "ZID": 1,
    "ZName": "上架"
}])


const finds=ref({
    MLX:0,
    SName:"",
    KLX:0,
    SZT:null,
    pageindex:1,
    pagelaze:5
})

const fysy=ref({
    totalnum:0,
    totalpage:0
})

const Show=()=>{
    axios.get("https://localhost:7158/api/Suo/GetShow",{params:finds.value}).then(res=>{
        data.value=res.data.list;
        fysy.value.totalnum=res.data.totalnum
        fysy.value.totalpage=Math.ceil(fysy.value.totalnum/finds.value.pagelaze)
    })
}

const qx =()=>{
    if(quan.value){
        data.value.forEach(a=>{
            redids.value.push(a.SID)
        })
    }else{
        redids.value=[];
    }
}

const DelUpd=(SID:any)=>{
    axios.get("https://localhost:7158/api/Suo/DelUpd",{params:{SID:SID}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            Show();
        }else{
            alert("删除失败")
        }
    })
}

const DelZT=()=>{
    var a = redids.value.toString();
    axios.get("https://localhost:7158/api/Suo/UpdPL",{params:{SID:a}}).then(res=>{
        if(res.data>0){
            alert("修改状态成功")
            Show();
        }else{
            alert("修改状态失败")
        }
    })
}



const FY=(SID:any)=>{
    if(SID>=1 &&SID<=fysy.value.totalpage){
        finds.value.pageindex=SID;
        Show();
    }
}

const Rshow=()=>{
    finds.value.pageindex=1;
    Show();
}

const MShow=()=>{
    axios.get("https://localhost:7158/api/Suo/GetM").then(res=>{
        Men.value=res.data
    })
}

const KShow=()=>{
    axios.get("https://localhost:7158/api/Suo/GetK").then(res=>{
        Ka.value=res.data
    })
}
const ZShow=()=>{
    axios.get("https://localhost:7158/api/Suo/GetZ").then(res=>{
        ZT.value=res.data
    })
}

const CZ=()=>{
    finds.value.KLX=0;
    finds.value.MLX=0;
    finds.value.SName="";
    finds.value.SZT=null;
    Show();
}


const router=useRouter();
const Fan=(SID:any)=>{
    router.push({path:"/Fan",query:{SID:SID}})

}


</script>

<style scoped>

</style>